
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormItemProps, FormProps } from 'element-plus'
import  { doPost } from '@/assets/工具/网络请求'
import { UserInfo } from '@/assets/工具/枚举'
import { routerKey } from 'vue-router'
import router from '@/router'

const labelPosition = ref<FormProps['labelPosition']>('top')
const itemLabelPosition = ref<FormItemProps['labelPosition']>('')
/* const userInfo = reactive({
  id:'',
  userName: '',
  password: '',
  identity: '',
  phone:''
}) */
const Reader = reactive({
  id :'',
    name:'',
    phone:'',
    password:'',
    readerIDCard:''
})
/* const register = async() =>{

    doPost(USER.USER_INFO,userInfo)
   .then(res =>{

    if(res.status === 201){
      router.push('/login')
    }else{

    }
   })

} */
const register = async() =>{

    doPost("reader",Reader)
   .then(res =>{

    if(res.status === 201){
      router.push('/login')
    }else{

    }
   })

}
</script>
<template>

<div class="背景图">

  <h1 class="readBook">欢迎来到图书注册页</h1>
  <div id="首页">
        <el-form
      :label-position="labelPosition"
      label-width="auto"
      :model="Reader"
      style="max-width: 600px"
      value="top"
    >



      <el-form-item label="姓名" :label-position="itemLabelPosition">
        <el-input v-model="Reader.name" />
      </el-form-item>
      <el-form-item label="密码" :label-position="itemLabelPosition">
        <el-input v-model="Reader.password" />
      </el-form-item>
      <el-form-item label="身份证" :label-position="itemLabelPosition">
        <el-input v-model="Reader.readerIDCard" />
      </el-form-item>
      <el-form-item label="电话号码" :label-position="itemLabelPosition">
        <el-input v-model="Reader.phone" />
      </el-form-item>
    </el-form>
    <div class="mb-4">

    <el-button type="success" plain @click="register">立即注册</el-button>
    <el-button type="success" plain @click="$router.push('/login')">登陆</el-button>
  </div>
    </div>

</div>
  </template>



  <style>
  .mb-4{
    display: flex;
    justify-content: space-evenly;
  }
  .背景图{
    background:url('@/assets/images/index/注册页面.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100vh;
  }
  .readBook{
    width: 1000px;
  line-height: 150px;
  font-size: 90px;
  letter-spacing: 20px;
    padding-top:80px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    box-sizing: border-box;
    margin: auto;
    text-align: center;
    color: #ef4949;
    font-family: "华文行楷", sans-serif;
    /* background-color: #D4D7DE; */
  }
#首页 {
    width: 400px;
    margin:100px auto;
}

</style>
